<template>
  <div class="section_common">
    <div class="search_input">
      <el-input
        v-model="search.keyword"
        size="mini"
        placeholder="请输入人名、标题"
      ></el-input>
    </div>
    <div class="select_area">
      <el-cascader
        clearable
        v-model="search.type"
        :options="options"
        :props="{ expandTrigger: 'hover' }"
        placeholder="类型"
        size="mini"
      >
      </el-cascader>
      <el-select v-model="search.status" size="mini" placeholder="审批状态">
        <el-option label="全部" value=""></el-option>
        <el-option label="审核中" value="审核中"></el-option>
        <el-option label="已通过" value="已通过"></el-option>
        <el-option label="已驳回" value="已驳回"></el-option>
      </el-select>
      <!--      <el-select v-model="search.status" size="mini" placeholder="类型">
                    <el-option label="上雪仓" value="shenzhen"></el-option>
                    <el-option label="东莞仓" value="hefei"></el-option>
                  </el-select>-->
      <el-date-picker
        v-model="search.time"
        type="daterange"
        size="mini"
        range-separator="-"
        value-format="yyyy-MM-dd"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :picker-options="pickerOptions"
      >
      </el-date-picker>
      <el-button type="primary" size="mini" @click="findApplyByUser(1)"
        >搜索</el-button
      >
    </div>
    <div class="main">
      <div class="apply-empty" v-if="applys.length == 0">暂无更多内容</div>
      <div v-else class="item" v-for="(item, index) in applys" :key="index">
        <div v-on:click="spdetail(item)">
          <div class="top">
            <div class="title">
              <div
                :class="
                  item.user_status == 'DELETED' ? 'name delete_color' : 'name'
                "
              >
                {{ item.options1 }}
              </div>
              <div
                class="status"
                v-if="
                  item.options2 === '已通过' ||
                  item.options2 === '同意' ||
                  item.options2 === '通过'
                "
                style="background-color: #5daf34"
              >
                {{ item.options2 }}
              </div>
              <div
                class="status"
                v-else-if="
                  item.options2 === '已驳回' ||
                  item.options2 === '拒绝' ||
                  item.options2 === '不通过'
                "
                style="background-color: #ff6569"
              >
                {{ item.options2 }}
              </div>
              <div
                class="status"
                v-else-if="
                  item.options2 === '审核中' ||
                  item.options2 === '审批中' ||
                  item.options2 === '组长审核通过' ||
                  item.options2 === '主管审核通过' ||
                  item.options2 === '申请中'
                "
                style="background-color: cornflowerblue"
              >
                {{ item.options2 }}
              </div>
              <div
                class="status"
                v-else-if="item.options2 === '已撤销'"
                style="background-color: #b9bec2"
              >
                {{ item.options2 }}
              </div>
              <div class="status" v-else style="background-color: goldenrod">
                {{ item.options2 }}
              </div>
            </div>
            <div class="time">{{ item.options3 }}</div>
          </div>
          <div class="info">
            <div class="type">{{ item.options4 }}</div>
            <div class="start">{{ item.options5 }}</div>
            <div class="start">{{ item.options6 }}</div>
            <!--<div class="end">结束时间：2021/12/31</div>-->
          </div>
        </div>
      </div>
    </div>

    <van-pagination
      @change="findApplyByUser(2)"
      v-model="currentPage"
      :total-items="totalNum"
      :items-per-page="10"
      force-ellipses
    >
      <template #prev-text>
        <van-icon name="arrow-left" />
      </template>
      <template #next-text>
        <van-icon name="arrow" />
      </template>
    </van-pagination>
  </div>
</template>

<script>
import Vue from "vue";
import { Pagination } from "vant";
Vue.use(Pagination);

/*页面参数说明
 * options1   标题
 * options2   结果
 * options3   时间
 * options4   随意内容
 * options5   随意内容
 * options6   随意内容
 * options7   类型
 * options8   当前申请/审批的id
 *user_status 用户离职状态
 * */
export default {
  data() {
    return {
      nowUser: JSON.parse(localStorage.getItem("userInfo")).userId,
      currentPage: 1,
      totalNum: 1,
      applys: [],
      tra_need_apply: {
        dialogVisible: false, //显示框
        result_content: "", //审核结果反馈
        id: "", //审核的申请id
        result: 0, //结果
        index: 0, //审核申请的索引
      },
      input: "",
      search: {
        keyword: "",
        status: "",
        type: "",
        time: "",
      },
      value: [],
      options: [
        {
          value: "renshiguanli",
          label: "人事管理",
          children: [
            {
              value: "转正审批",
              label: "转正审批",
            },
            {
              value: "物资维修申请",
              label: "物资维修申请",
            },
            {
              value: "物资维修详情",
              label: "物资维修详情",
            },
            {
              value: "宿舍登记",
              label: "宿舍登记",
            },
            {
              value: "费用登记",
              label: "费用登记",
            },
          ],
        },
        {
          value: "zhaopingguanli",
          label: "招聘管理",
          children: [
            {
              value: "招聘申请",
              label: "招聘申请",
            },
            {
              value: "内推申请",
              label: "内推申请",
            },
            {
              value: "岗位申请",
              label: "岗位申请",
            },
          ],
        },
        {
          value: "peixunguanli",
          label: "培训管理",
          children: [
            {
              value: "培训需求申请",
              label: "培训需求申请",
            },
            {
              value: "培训师申请",
              label: "培训师申请",
            },
            {
              value: "培训计划申请",
              label: "培训计划申请",
            },
          ],
        },
        {
          value: "zichanguanli",
          label: "资产管理",
          children: [
            {
              value: "物品领用",
              label: "物品领用",
            },
            {
              value: "物品报废登记",
              label: "物品报废登记",
            },
            {
              value: "物资维修详情",
              label: "物资维修详情",
            },
            {
              value: "物品采购申请",
              label: "物品采购申请",
            },
            {
              value: "仓库资产登记",
              label: "仓库资产登记",
            },
            {
              value: "仓库物品报废",
              label: "仓库物品报废",
            },
            {
              value: "仓库物品领用",
              label: "仓库物品领用",
            },
            {
              value: "摄影申领申请",
              label: "摄影申领申请",
            },
            {
              value: "摄影采购申请",
              label: "摄影采购申请",
            },
            {
              value: "摄影报废申请",
              label: "摄影报废申请",
            },
          ],
        },
      ],

      fromType: this.$route.params.type,
      pickerOptions: {
        shortcuts: [
          {
            text: "最近7天",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近30天",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近90天",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近180天",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 180);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
    };
  },

  created() {
    if (this.fromType == "needsToApplyList") {
      this.findTraNeedApplyByUser();
    } else {
      this.findApplyByUser();
    }
  },

  methods: {
    //培训模块审核处理操作
    tra_need_apply_handle(result) {
      var that = this;
      this.$https
        .post("/mobiles/needApplyExem", {
          id: this.tra_need_apply.id,
          result: result, //审核结果
          content: this.tra_need_apply.result_content,
        })
        .then(() => {
          if (result == 1) {
            that.applys[this.tra_need_apply.index].options2 = "已通过";
            that.tra_need_apply.dialogVisible = false;
            that.tra_need_apply.result_content = "";
            return;
          }
          that.applys[this.tra_need_apply.index].options2 = "已驳回";
          that.tra_need_apply.dialogVisible = false;
          that.tra_need_apply.result_content = "";
        })
        .catch((err) => {
          console.log(err);
        });
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(() => {
          done();
        })
        .catch(() => {});
    },
    //培训模块审核按钮
    tra_need_apply_btn(item, index) {
      this.tra_need_apply.id = item.options8;
      this.tra_need_apply.index = index;
      this.tra_need_apply.dialogVisible = true;
    },
    //当前用户培训申请记录
    findTraNeedApplyByUser() {
      var that = this;
      this.$https
        .post("/mobiles/getNeedApplyListUrl", {
          nowUser: this.nowUser,
          keywords: this.search.keyword,
          status: this.search.status,
          times: this.search.time,
        })
        .then((res) => {
          that.applys = res.data.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },

    //查找当前用户所提交的相应物品审批记录
    findApplyByUser(id) {
      //console.log("改变会输出")
      //初始化选择物品归属地和物品名称
      if (id == 1) {
        this.currentPage = 1;
      }
      this.$https
        .post("/mobiles/findApplyByUser", {
          nowUser: this.nowUser,
          keywords: this.search.keyword,
          status: this.search.status,
          times: this.search.time,
          type: this.search.type,
          currentPage: this.currentPage,
        })
        .then((res) => {
          //this.applys = res.data.data;
          this.totalNum = res.data.data.total;
          this.applys = res.data.data.records;
        })
        .catch((err) => {
          console.log(err);
        });
    },

    spdetail(item) {
      if (item.path) {
        this.$router.push(item.path);
        // location.href=path;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.search_input {
  margin: 10px 0;
  min-width: 700px;
  max-width: 100%;
}
.select_area {
  width: 700px;
}
.el-select {
  width: 100px;
}

.main {
  min-width: 700px;
  max-width: 100%;
  display: flex;
  flex-flow: column nowrap;
  margin-top: 10px;
  .apply-empty {
    font-size: 16px;
        color: #999;
        text-align: center;
        padding: 20px 0;
        border: 1px solid rgba(0, 0, 0, 0.1);
        border-radius: 5px;
        margin-bottom: 10px;

  }
  .item {
    display: flex;
    flex-flow: column nowrap;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    margin-bottom: 5px;
    padding: 10px;
    font-size: 14px;
    background-color: white;

    .top {
      display: flex;
      flex-flow: row nowrap;
      justify-content: space-between;
      align-items: center;

      .title {
        display: flex;
        flex-flow: row nowrap;
        align-items: center;

        .name {
          font-weight: 600;
          font-size: 16px;
        }
        .delete_color {
          color: #999999;
        }
        .status {
          padding: 1px 10px;
          /*background-color: goldenrod;*/
          color: white;
          margin-left: 5px;
          border-radius: 5px;
        }
      }
    }
  }
}
</style>
